import React, { Fragment } from 'react'
import Test from './Test'
import Demo from './Demo'
const appRef = React.createRef()
const xxxRef = React.createRef()
const yyyRef = React.createRef()
export default function App() {
  return (
    <>
      {/* ref和标签进行绑定,可以获取到标签的真实dom */}
      {/* <h1 ref={xxxRef}>234</h1> */}
      {/* ref和类组件进行绑定,可以获取到类组件的实例 */}
      {/* <Demo ref={yyyRef}></Demo> */}
      {/* ref和函数组件进行绑定,首先会警告,并且什么都获取不到 */}
      <Test ref={appRef} xxx={1}></Test>

      <button
        onClick={() => {
          // console.log(xxxRef.current)
          // console.log(yyyRef.current)
          // console.log(appRef.current)
          appRef.current.focus()
        }}
      >
        点击按钮让Test组件中的文本框获得焦点
      </button>
    </>
  )
}
